<template>
  <custom-dialog
    ref="dialog" :before-confirm="beforeConfirm"
    :on-confirm="onConfirm" :title="modalTitle"
  >
    <el-form ref="form" style="margin-bottom: 3rem;" :model="info" :rules="rules">
      <el-form-item label="图片类型" prop="type">
        <dictionary-picker v-model="info.type" dic-code="TU_PIAN_LEI_XING"></dictionary-picker>
      </el-form-item>
      <el-form-item label="上传图片" prop="file" :class="{'has-profile': hasProfile}">
        <el-upload
          ref="upload"
          :auto-upload="false"
          action="#"
          :limit="1"
          list-type="picture-card"
          :file-list="fileList"
          :on-change="onChange"
          :multiple="false"
          :upload-disabled="false"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              :src="file.url"
              alt="" class="el-upload-list__item-thumbnail"
            >
            <div class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </div>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import { save } from '@/api/pictureResources'
import { upload } from '@/api/minio'
import DictionaryPicker from '@/components/dictionary-picker'

export default {
  name: 'operate-modal',
  components: {
    DictionaryPicker,
    CustomDialog
  },
  props: {
    modalTitle: String,
    modalData: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data () {
    return {
      info: {
        id: '',
        url: '',
        name: '',
        type: '',
        file: '',
      },
      rules: {
        file: [{ required: true, message: '必填项' }],
        type: [{ required: true, message: '必填项' }],
      },
    }
  },
  computed: {
    fileList () {
      const { url, name } = this.info
      return url ? [{ name: name, url: url }] : []
    },
    hasProfile () {
      const info = this.info
      return !!info.url || !!info.file
    },
  },
  methods: {
    open () {
      this.info = {
        ...this.$options.data().info,
        ...this.modalData
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles()
      }
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    beforeConfirm () {
      return this.$refs.form.validate()
    },
    onConfirm (close) {
      const file = this.info.file
      return this.uploadFile(file).then((data) => {
        const params = { ...this.info }
        params.url = data.url
        params.name = data.urlName
        if (!params.id) {
          delete params.id
        }
        save(params).then(res => {
          if (res.code === 200) {
            this.$message.success('保存成功')
            this.$emit('save-success')
            this.$refs.upload.clearFiles()
            close()
          }
        })
      })
    },
    onChange (file) {
      this.info.file = file.raw
    },
    handleRemove (file) {
      this.info.file = ''
      this.$refs.upload.clearFiles()
    },
    uploadFile (file) {
      return new Promise((resolve) => {
        upload(file).then(res => {
          if (res.code === 200) {
            resolve(res.data)
          }
        })
      })
    },
  },
}
</script>

<style scoped>
.has-profile ::v-deep .el-upload {
  display: none;
}
</style>
